<template>
<div class="app-container">
    <div class="filter-container">
        <div class="filter-left">
            <el-form :inline="true" ref="form" :model="query" @submit.native.prevent>
                <el-form-item>
                    <el-button class="filter-item" type="primary" @click="showAddView">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.keyword" placeholder="名称" style="width: 200px" class="filter-item" clearable @clear="getTableData({})" />
                </el-form-item>
                <el-button class="filter-item" type="primary" native-type="submit" @click="getTableData({})">搜索</el-button>
            </el-form>
        </div>
    </div>
    <el-table :data="tableData" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="ID" align="center" width="95">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
        </el-table-column>
        <el-table-column label="名称">
            <template slot-scope="scope">
                {{ scope.row.title }}
            </template>
        </el-table-column>
        <el-table-column label="代号" prop="field"></el-table-column>
        <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
        <el-table-column label="操作" align="center" width="200px">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="showEditView(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <edit-view ref="editView" @getTableData="getTableData"></edit-view>
</div>
</template>

<script>
import request from "@/utils/request";
import editView from './edit.vue'

export default {
    components: {
        editView
    },
    data() {
        return {
            query: {
                title: ""
            },
            tableData: [],
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            let query = {};
            request({
                url: "/api/system.dictionary/index",
                method: "post",
                query,
            }).then((res) => {
                this.tableData = res.data.list
            });
        },
        showAddView() {
            this.$refs['editView'].showAddView();
        },
        // 编辑行
        showEditView(row) {
            this.$refs['editView'].showSaveView(row);
        },
        // 删除行
        deleteRow(row) {

        }
    },
};
</script>
